<template>
	<view>
		<mh-navbar custom :back="true" title="更改昵称" fixed center zIndex="1010" />
		<u-form ref="uForm" >
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-align="center" left-icon="account" label-width="200" :label-position="labelPosition" label="用户昵称" prop="name">
				<u-input  placeholder="请输入用户昵称"  v-model="form.nickName" type="text"></u-input>
			</u-form-item>
			<u-button type="error" @click="submit">确认修改</u-button>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				labelPosition: 'left',
				form:{
					nickName: ''
				}
			}
		},
		onShow(){
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.nickName)){
				this.form.nickName = this.$store.state.vuex_user.nickName;
			}
		},
		onLoad() {
			
		},
		methods: {
			submit() {
				if(this.$utils.isNotEmpty(this.form.nickName)){
					this.$u.api.user.updateNickName({
							nickName: this.nickName,
						})
						.then(res => {
							if (res.code == 200) {
								this.$u.vuex('vuex_user.nickName', this.form.nickName)
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success'
								})
								uni.navigateBack();
							}else{
								uni.showModal({
								    showCancel: false,
								    title: '修改失败',
								    content: res.msg,
								});
							}
						});
				} else {
						uni.showModal({
						    showCancel: false,
						    title: '保存失败',
						    content: '昵称校验失败',
						});
				}
			}
		}
	}
</script>
<style lang="scss">
	.wrapper{
		padding: 0 10px;
	}
</style>
